<template>
  <!-- 订单评论审核 -->
  <div>
    <el-form :inline="true" class="demo-form-inline" :model="searchForm">
      <el-form-item>
        <el-input v-model="searchForm.content" placeholder="请输入关键字" clearable />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchForm.orderId" placeholder="请输入订单编号" clearable />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option label="通过" value="通过" />
          <el-option label="不通过" value="不通过" />
          <el-option label="未审核" value="未审核" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toSearch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="content" label="评论内容" width="300" />
      <el-table-column prop="customerId" label="顾客编号" />
      <el-table-column prop="orderId" label="订单编号" />
      <el-table-column prop="commentTime" label="评论时间">
        <template slot-scope="scope">{{ scope.row.commentTime | fmtDate }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="评论状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='通过'" type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status==='不通过'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status==='未审核'" type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==='未审核'" type="success" size="mini" @click="check(scope.row)">通过</el-button>
          <el-button v-if="scope.row.status==='未审核'" type="danger" size="mini" @click="checkno(scope.row)">不通过</el-button>
          <el-button v-if="scope.row.status==='未审核'" type="warning" size="mini" @click="deleteById(scope.row)">删除</el-button>
          <el-button v-if="scope.row.status==='通过'" type="warning" size="mini" @click="deleteById(scope.row)">删除</el-button>
          <el-button v-if="scope.row.status==='通过'" type="warning" size="mini" @click="checkno(scope.row)">不通过</el-button>
          <el-button v-if="scope.row.status==='不通过'" type="warning" size="mini" @click="deleteById(scope.row)">删除</el-button>
          <el-button v-if="scope.row.status==='不通过'" type="warning" size="mini" @click="check(scope.row)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2,5,10,15,20,30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      searchForm: {
        content: '',
        orderId: '',
        status: ''
      },
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.pageQuery()
      },
      deep: true
    }
  },
  created() {
    this.pageQuery()
  },
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    OrderPageQuery(data) {
      let res = request.get('/orderComment/pageQuery',{
            params: {
              ...data,
            }
          })
     return res
    },
    async pageQuery() {
      const temp = {
        ...this.params,
        ...this.searchForm
      }
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      const res = await this.OrderPageQuery(temp)
      this.tableData = res.data.list
      this.params.total = res.data.total
    },
    handleSizeChange(val) {
      this.params.page = 1
      this.params.pageSize = val
    },
    handleCurrentChange(val) {
      this.params.page = val
    },
    toSearch() {
      this.pageQuery()
    },
    checkNoPass(data) {
      let res = request.get('/orderComment/checkNoPass',{
            params: {
              id: data,
            }
          })
     return res
    },
    checkPass(data) {
      let res = request.get('/orderComment/checkPass',{
            params: {
              id: data,
            }
          })
      return res
    },
    deleteById(data) {
      let res = request.get('/orderComment/deleteById',{
            params: {
              id: data,
            }
          })
      return res
    },
    async check(row) {
      const id = row.id
      const res = await this.checkPass(id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.pageQuery()
    },
    
    async checkno(row) {
      const id = row.id
      const res = await this.checkNoPass(id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.pageQuery()
    },
    async deleteById(row) {
      const res = await this.deleteById(row.id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.pageQuery()
    }
  }
}
</script>
<style scoped>
</style>
